<template>
  <view class="payment-container">
    <nut-cell-group title="订单信息">
      <nut-cell title="订单编号" :value="orderId" />
      <nut-cell title="订单金额" :value="`¥${amount}`" />
    </nut-cell-group>

    <nut-cell-group title="支付方式">
      <nut-cell
        v-for="(item, index) in paymentMethods"
        :key="index"
        :title="item.name"
        :value="item.value"
        @click="handlePaymentMethodSelect(index)"
      />
    </nut-cell-group>

    <view class="footer">
      <nut-button block type="primary" @click="handlePayment">立即支付</nut-button>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useRouter } from '@tarojs/taro'
import { payOrder } from '@/api/order'

const router = useRouter()
const orderId = ref('')
const amount = ref(0)
const selectedPaymentMethod = ref(0)
const paymentMethods = ref([
  { name: '微信支付', value: 'wechat' },
  { name: '余额支付', value: 'balance' }
])

// 获取订单信息
const getOrderInfo = () => {
  const { orderId: id, amount: amt } = router.params
  orderId.value = id || ''
  amount.value = amt ? Number(amt) : 0
}

// 选择支付方式
const handlePaymentMethodSelect = (index: number) => {
  selectedPaymentMethod.value = index
}

// 处理支付
const handlePayment = async () => {
  try {
    const res = await payOrder({
      orderId: orderId.value,
      paymentMethod: paymentMethods.value[selectedPaymentMethod.value].value
    })
    // 支付成功处理
  } catch (error) {
    console.error('支付失败:', error)
  }
}

getOrderInfo()
</script>

<style lang="scss">
.payment-container {
  padding: 20px;
  .footer {
    margin-top: 30px;
  }
}
</style>